<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "UTF-8">
		<title>test02</title>
		<style>
			#Mark {
				width: 800px;
				height: 200px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				background: rgba(0, 0, 0, .5);
				color: #fff;
				z-index: 999;
				border-radius: 50%;
				display: none;
				text-align: center;
			}
			
			#res h2 {
				text-align: center;
				padding: 5px 0;
			}
			
			#res img {
				width: 50px;
				height: 50px;
				display: block;
				margin: 0 auto;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<canvas id = "canvas" width = "800" height = "400"></canvas>
		<div class = "Mark" id = "mark"></div>
		<div class = "res" id = "res">
			<h2>得分:100</h2>
			<img src = "src/金牌.png">
		</div>
	</body>
	<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		
		var bird = new Image();
		bird.src = "src/brid/a.png";
		
		var birdX = 200;
		var birdY = 100;
		var birdTimer = null;
		bird.onload = function () {
			if (birdTimer != null) {
				return;
			}
			birdTimer = setInterval(function () {
				if (birdY < 355) {
					birdY++;
				}
				context.clearRect(0, 0, 800, 400);
				drawColumn();
				context.drawImage(bird, birdX, birdY);
			}, 10);
		}
		document.onmousedown = function () {
			bird.src = "src/brid/b.png";
			birdY -= 60;
		}
		document.onmouseup = function () {
			bird.src = "src/brid/a.png";
		}
		
		var columnArr = [];
		var columnTimer = setInterval(function () {
			var column = {}
			column.positionX = 800;
			column.positionY = -Math.round(Math.random() * 100 + 100);
			column.imgA = new Image();
			column.imgB = new Image();
			column.imgA.src = "src/column.png";
			column.imgB.src = "src/column.png";
			column.imgA.onload = function () {
				column.imgA.width *= 1.1;
				column.imgA.height *= 2.1;
			}
			column.imgB.onload = function () {
				column.imgB.width *= 1.1;
				column.imgB.height *= 2.1;
			}
			column.id = new Date().getDate();
			columnArr.push(column);
		}, 1500);
		var mark = 0;
		var lastColumnId = -10;
		
		function drawColumn() {
			for (var i = 0; i < columnArr.length; i++) {
				columnArr[i].positionX--;
				//console.log(columnArr[i].imgA.width + "____" + i + "______" + columnArr[i].positionX + "__" + columnArr[i].positionY);
				context.drawImage(columnArr[i].imgA, columnArr[i].positionX, columnArr[i].positionY);
				context.drawImage(columnArr[i].imgB, columnArr[i].positionX, columnArr[i].positionY + 350);
				if (birdX > columnArr[i].positionX && birdX < columnArr[i].positionX + columnArr[i].imgA.width) {
					if (i != lastColumnId) {
						console.log("经过......" + i + "_____" + columnArr[i].id);
						mark++;
						lastColumnId = i;
						document.getElementById("mark").innerHTML = "得分:" + mark;
					}
					if (birdY < columnArr[i].positionY + columnArr[i].imgA.height || birdY + bird.height > columnArr[i].positionY + 350) {
						clearInterval(birdTimer);
						clearInterval(columnTimer);
						var oRes = document.getElementById("res");
						oRes.style.display = "block";
						oRes.children[0].innerHTML = "得分:" + mark;
						setTimeout(function () {
							oRes.innerHTML = "游戏即将重新开始";
							alert("dddddddddddddddddddd");
							setTimeout(function () {
								location.reload();
							}, 2000);
						}, 3000);
					}
				}
			}
		}
	
	</script>
</html>



















